<template>
  <div class="container containerBox">
    <el-row class="topTitleBox">
      <el-col :span="16" class="topTitle">
        <i class="icon iconfont iconfanhui1" @click="goBack"></i>
        <!-- {{name == ''?"申报":"审核"}}项目：{{projectInfo.projectName}} -->
        {{ name }}的{{ type == 'employ' ? '就业' : '失业' }}信息
        <span
          type="success"
          class="tag-item"
          style="background: #009588; border-color: #009588"
          >{{ status }}</span
        >
      </el-col>
      <el-col
        :span="8"
        class="topTitle"
        style="text-align: right; padding-right: 20px"
      >
        <el-button class="commonBut saveBtn funComBut" plain @click="toPerson"
          >人员档案</el-button
        >
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >身份证号：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.idcard || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >性别：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.sex || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >联系电话：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.tel || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >出生日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.birthday || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >文化程度：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.edu || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >户籍详细地址：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.address || '--'
                }}</span>
              </el-col>
              <el-col
                :span="12"
                class="labelWidthSty"
                v-if="type == 'unEmploy'"
              >
                <span class="gridContent color333 fontSizeF fontWeight"
                  >户口性质：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.addressType || '--'
                }}</span>
              </el-col>
              <el-col
                :span="12"
                class="labelWidthSty"
                v-if="type == 'unEmploy'"
              >
                <span class="gridContent color333 fontSizeF fontWeight"
                  >户籍详细地址：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.address || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >就业单位名称：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.workOrg || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >就业创业证号码：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.entrepreneurshipNo || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >就业形式：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.workType || '--'
                }}</span>
              </el-col>
              <el-col
                :span="12"
                class="labelWidthSty"
                v-if="type == 'unEmploy'"
              >
                <span class="gridContent color333 fontSizeF fontWeight"
                  >失业原因：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.loseReason || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >产业类别：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.productType || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >就业时间：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.workTime || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >就业地所在市县(区)：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.workArea || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type !== 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >失业时间：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.loseTime || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type !== 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >登记日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.signTime || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type !== 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >经办机构：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.applyOrg || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >创建日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.createDate || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >经办日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.applyTime || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="type == 'employ'">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >经办机构：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.applyOrg || '--'
                }}</span>
              </el-col>
              <el-col
                :span="24"
                class="labelWidthSty"
                v-if="type == 'unEmploy'"
              >
                <span class="gridContent color333 fontSizeF fontWeight"
                  >备注：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  projectInfo.remark || '--'
                }}</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'infoDetail',
  data() {
    return {
      id: '',
      projectInfo: {},
      type: '',
      status: '',
      name: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.name = this.$route.query.name
    this.status = this.$route.query.status
    this.getProlectInfo()
  },
  methods: {
    getProlectInfo() {
      this.axios({
        method: 'post',
        url: 'api-r/employeejob/expand/findbyid',
        data: {
          id: this.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.projectInfo = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    goBack() {
      var tab
      if (this.type == 'employ') {
        tab = 'employmentInfo'
      } else if (this.type == 'unEmploy') {
        tab = 'unemploymentInfo'
      }
      this.$router.push({
        path: '/home/eZhoubigScreen/employmentInfoTab',
        query: {
          tab: tab,
        },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/eZhoubigScreen/employmentInfoTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 人员档案
    toPerson() {
      if (this.projectInfo && this.projectInfo.employeeId) {
        this.$router.push({
          path: '/home/employee/employeeInfoC',
          name: 'employeeInfoC',
          query: {
            employeeId: this.projectInfo.employeeId,
            path: 'JC',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/employee/employeeTotalListJC',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$message({
          message: '无匹配人员档案信息',
          type: 'error',
        })
      }
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 50px;
  /* background-color: #e4ebf1; */
  padding-left: 24px;
  font: bold 18px/50px Microsoft YaHei;
}

.topTitle1 {
  height: 50px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px Microsoft YaHei;
  padding-top: 5px;
}
.container {
  padding: 0;
  overflow: hidden;
  .topTitleBox {
    position: relative;
    height: 50px;
    &::after {
      content: '';
      width: calc(100%);
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: absolute;
      left: 0;
      top: 100%;
    }
  }
}
.mainCon {
  height: calc(100% - 50px);
  padding: 0 24px;
  overflow-y: auto;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
  margin-top: 40px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidthSty {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  margin-bottom: 6px;
}

.information {
  /* font-size: 14px;
    color: #151515; */
  font-size: 14px;
  color: #151515;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

// .detailInfo {
//   padding: 18px 0 5px 0;
// }

.detailInfoItem {
  padding-left: 14px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag-item {
  display: inline-block;
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 20px;
  padding: 0 8px;
  text-align: center;
  line-height: 20px;
  margin-left: 12px;
  font-weight: normal;
}

.imgStyle {
  padding-left: 100px;
  margin-top: 24px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}
</style>
